<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tree-table</title>
    <link rel="stylesheet" href="../../../statics/layui/css/layui.css">
    <link rel="stylesheet" href="../../../statics/css/main.css" media="all"/>
    <link rel="stylesheet" href="../../../statics/layui/font/font.css" media="all"/>
    <script type="text/javascript" src="../../../statics/layui/layui.js"></script>
    <script type="text/javascript" src="../../../statics/layui/lay/modules/jquery.js" charset="utf-8"></script>
</head>
<body>
<div class="x-nav">
    <span class="layui-breadcrumb">
        <a>系统管理</a>
        <a><cite>菜单管理</cite></a>
    </span>
</div>
<div class="layui-fluid">
    <!-- <div class="layui-btn-group">
         <button class="layui-btn" id="btn-add">新增</button>
         <button class="layui-btn" id="btn-expand">展开</button>
         <button class="layui-btn" id="btn-fold">折叠</button>
         <button class="layui-btn" id="btn-refresh">刷新</button>
     </div>-->
    <table id="dataList" class="layui-table layui-form" lay-filter="dataList"></table>
    <script type="text/html" id="toolbarOrg">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="btn-add">新增</button>
            <button class="layui-btn layui-btn-sm" lay-event="btn-expand">展开</button>
            <button class="layui-btn layui-btn-sm" lay-event="btn-fold">折叠</button>
            <button class="layui-btn layui-btn-sm" lay-event="btn-refresh">刷新</button>
        </div>
    </script>
    <!-- 操作列 -->
    <script type="text/html" id="auth-state">
        <a class="layui-btn layui-btn-primary layui-btn-xs layui-bg-blue" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
</div>

<script src="/static/js/main.js"></script>
<script>
    var ysb = {};
    var configureCom = {};
    layui.use(['table', 'treetable', 'configureCom', 'sessionFun', 'configure'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var treetable = layui.treetable;
        var sessionFun = layui.sessionFun;
        var configure = layui.configure;
        var matchDict = layui.matchDict;
        configureCom = layui.configureCom;
        var token = localStorage.getToken;
        window.renderTable = function () {
            // 渲染表格
            layer.load(4);
            treetable.render({
                method: 'get',
                treeColIndex: 1,
                treeSpid: 0,
                treeIdName: 'menuId',
                treePidName: 'parentId',
                treeDefaultClose: true,
                treeLinkage: true,
                toolbar: '#toolbarOrg',
                elem: '#dataList',
                url: baseApi + '/sys/menu/list?token=' + token,
                page: true,
                request: {
                    pageName: 'currPage', //页码的参数名称，默认：page
                    limitName: 'limit' //每页数据量的参数名，默认：limit
                },
                cols: [[
                    {type: 'numbers'},
                    {field: 'name', width: 250,title: '菜单/权限名称'},
                    {field: 'menuOrgTypeName', width: 150,title: '单位类型',templet: function (d){
                            return matchDict.name(d.menuOrgType, 'MENU_ORG_TYPE');
                        }
                    },
                    //{field: 'perms', title: '权限标识'},
                    {field: 'url', width: 400,title: '菜单url'},
                    {field: 'orderNum', width: 80,title: '排序'},
                    {
                        field: 'icon', title: '图标', width: 80,templet: function (d) {
                            if (d.icon != null && d.icon != "null") {
                                return '<i class="layui-icon">' + decodeURIComponent(d.icon) + '</i>';
                            } else {
                                return '';
                            }
                        }
                    },
                    //{field: 'orderNum', align: 'center', title: '排序号'},
                    {
                        field: 'type', align: 'center', templet: function (d) {
                            if (d.type == 2) {
                                return '<span class="layui-badge layui-bg-gray">按钮</span>';
                            } else if (d.type == 0) {
                                return '<span class="layui-badge layui-bg-blue">目录</span>';
                            } else if (d.type == 1) {
                                return '<span class="layui-badge-rim">菜单</span>';
                            }
                        }, title: '类型'
                    },
                    {templet: '#auth-state', width: 200, align: 'center', title: '操作'}
                ]],
                done: function () {
                    layer.closeAll('loading');
                }
            });
        };
        //初始化加载
        renderTable();

        //头工具栏事件
        table.on('toolbar(dataList)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            sessionFun.remove(configure.SESSION_LIST_DATA);
            switch (obj.event) {
                case 'btn-add':
                    configureCom.editItem('添加菜单', configure.MENU_DETAIL_HTML, configure.MENU_SAVE_HTTP).then(function(res){
                        if(res.code==0){
                            top.layer.msg('保存成功！');
                            renderTable();
                        }
                    });
                    break;
                case 'btn-expand':
                    treetable.expandAll('#dataList');
                    break;
                case 'btn-fold':
                    treetable.foldAll('#dataList');
                    break;
                case 'btn-refresh':
                    renderTable();
                    break;
            }
        });
        //监听工具条
        table.on('tool(dataList)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            sessionFun.set(configure.SESSION_LIST_DATA, data);
            if (data.id == null || data.id == "") {
                layer.msg("菜单信息不存在，请刷新或者登陆后重试");
                return false;
            }
            if (layEvent === 'del') {
                top.layer.confirm('是否删除?',function(index,item){
                    configureCom.deleteFun(configure.MENU_DELETE_HTTP, {menuId: data.menuId}).then(function(res){
                        top.layer.close(index);
                        if(res.code==0){
                            top.layer.msg('删除成功！');
                            renderTable();
                        }
                    });
                });
            } else if (layEvent === 'edit') {
                configureCom.editItem('修改菜单', configure.MENU_DETAIL_HTML, configure.MENU_UPDATE_HTTP).then(function(res){
                    if(res.code==0){
                        top.layer.msg('修改成功！');
                        renderTable();
                    }
                });
            }
        });
    });
</script>
</body>
</html>